'use client';

import { useEffect } from 'react';
import { useGlobalState } from '../context/GlobalStateContext';
import '../globals.css';

// 扩展Window接口以包含listDemo属性
declare global {
  interface Window {
    listDemo?: {
      newItem: string;
      setNewItem: (item: string) => void;
      items: string[];
      setItems: (items: string[]) => void;
    };
  }
}

export default function List() {
  const { state, updateListNewItem, updateListItems } = useGlobalState();
  const { newItem, items } = state.list;

  // 在控制台暴露状态以便验证
  useEffect(() => {
    window.listDemo = {
      newItem,
      setNewItem: updateListNewItem,
      items,
      setItems: updateListItems
    };
    
    console.log('列表绑定示例已加载。使用 window.listDemo 对象进行控制台验证。');
    console.log('可验证的属性和方法：newItem, setNewItem, items, setItems');
  }, [newItem, items, updateListNewItem, updateListItems]);

  const addItem = () => {
    if (newItem.trim()) {
      updateListItems([...items, newItem]);
      updateListNewItem('');
    }
  };

  const removeItem = (index: number) => {
    updateListItems(items.filter((_: string, i: number) => i !== index));
  };

  return (
    <div className="container">
      <h1>列表绑定示例</h1>
      <p>React可以轻松处理数组的双向绑定：</p>
      
      <div>
        <input 
          value={newItem} 
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateListNewItem(e.target.value)} 
          placeholder="输入新项目"
        />
        <button onClick={addItem}>添加项目</button>
      </div>
      
      <ul className="list">
        {items.map((item: string, index: number) => (
          <li key={index}>
            <input 
              value={item} 
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                const newItems = [...items];
                newItems[index] = e.target.value;
                updateListItems(newItems);
              }}
            />
            <button onClick={() => removeItem(index)} className="delete-btn">删除</button>
          </li>
        ))}
      </ul>
      
      <div className="instructions">
        <h3>控制台验证说明：</h3>
        <p>1. 添加、编辑或删除列表项</p>
        <p>2. 打开浏览器控制台，输入 <code>window.listDemo.items</code> 查看当前数组</p>
        <p>3. 在控制台中输入 <code>window.listDemo.setItems([...window.listDemo.items, '新项目'])</code> 添加新项目</p>
        <p>4. 在控制台中输入以下代码修改第一个项目：</p>
        <code>
          {`const newItems = [...window.listDemo.items];
newItems[0] = '修改后的项目';
window.listDemo.setItems(newItems);`}
        </code>
        <p>5. 观察页面上的列表自动更新</p>
      </div>
      
      <div className="advantages">
        <h3>React 列表绑定的优势</h3>
        <ul>
          <li>使用数组映射渲染列表，代码简洁</li>
          <li>使用key属性优化列表渲染性能</li>
          <li>不可变数据模式，避免直接修改状态</li>
          <li>支持复杂的列表操作，如排序、过滤等</li>
        </ul>
      </div>
    </div>
  );
}